<template>
  <div id="circleEchart" style="height: 45vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "circleEchart",
  data() {
    return {
      chart: null,
      options: {}
    };
  },
  created() {
    // this.getData();
  },
  mounted() {
    this.initOptions();
    this.initCharts();
  },
  methods: {
    initOptions() {
      this.options = {
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu"],
          z: 100
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "种植",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [2, 4, 6, 8],
            coordinateSystem: "polar",
            name: "养殖",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "生产",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "入岚",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "批发",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "农贸",
            stack: "a",
            emphasis: {
              focus: "series"
            }
          }
        ],
        legend: {
          show: true,
          data: ["种植", "养殖", "生产", "入岚", "批发", "农贸"]
        }
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("circleEchart"));

      this.chart.setOption(this.options);
    }
  }
};
</script>
